<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width:100px;
				height:100px;
				background: red;
				position:absolute;
				top:50px;
				left:150px;
			}
			#div2{
				width:100px;
				height:100px;
				background: chartreuse;
				position:absolute;
				top:180px;
				left:150px;
			}
			#target{
				width:1px;
				height:500px;
				background: blue;
				position:absolute;
				left:700px;
			}
		</style>
	</head>
	<body>
		<!--让div动起来-->
		<!--1.div需要有定位属性-->
		<!--2.运动的原理是：每隔一定时间，改变他某个属性的值。具体操作方法是：a,获取原来的值 b,将原值做改变得到新值 c.将新值写到元素样式里-->
		<!--3.停止条件-->
		<script>
			window.onload = function(){
				var oDiv1 = document.getElementById("div1");
				var oDiv2 = document.getElementById("div2");
				var speed = 10;
				
				var timer = setInterval(function(){
					move(oDiv1);
//					move(oDiv2);
				},1000/60);
				
				function move(obj){
//					1,获取div1原来的 left值,offsetLeft;
					var old_left = obj.offsetLeft;
	//				2,累计速度获得新left值
					var new_left = old_left + speed;
					if(new_left>700){
						clearInterval(timer);
						new_left = 700;
					}
	//				3,将新的left值,写入div1的行内样式,让其运动
					obj.style.left = new_left + 'px';
					
				}
			}
		</script>
		<div id="div1">111</div>
		<div id="div2">222</div>
		<div id="target"></div>
	</body>
</html>
